<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹跳小球</title>
	<style>
		*{padding:0;margin:0;}
		#box{
			width:100px;
			height:100px;
			border:1px solid blue;
			background-color:pink;
			border-radius:50%;
			position:absolute;
		}
	</style>
</head>
<body>
	<button id="btn" onclick="jia()" >开始</button>
	<div id="box" ></div>
</body>
	<script>
		var btn = document.getElementById("btn");
		var box = document.getElementById("box");
		var mytime;
		var pos = 0;
		var len=500;

		function jia(){
			clearInterval(mytime);
			speed = 5;
			mytime = setInterval(function(){
				box.style.left = box.offsetLeft+2+"px";
				box.style.top = box.offsetTop+speed+"px";
				if(box.offsetTop>=500){
					pos+=(len-len*0.8);
					len = len*0.8;
					jian(Math.ceil(pos));
				}
				speed+=2;
			},20);
		}

		function jian(pos){
			clearInterval(mytime);
			if(pos<500){
				mytime = setInterval(function(){
					box.style.left = box.offsetLeft+2+"px";
					var speed = Math.ceil((box.offsetTop-pos)/10)+3;
					box.style.top = box.offsetTop-speed+"px";
					if(box.offsetTop<=pos){
						jia();
					}
				},20);
			}
		}


	</script>
</html>